<template>
  <div>
    <!-- 头部 -->
    <user-header :headerData="headerData"
                 :dhsSalesawardRule="dhs_salesaward_rule"
                 @show="_show_qrcode()"></user-header>
    <!-- 导航 -->
    <user-nav :memberData="memberData" :current="4"></user-nav>
    <!-- 提现 -->

    <div class="accountPanel-links" v-if="!dzData.is_ltsn">
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor" :class="commissionData.dhs_virtual_order_success_return==1?'width':''">
          <div class="item fl">
            <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(commissionData.total_commission)"></i> -->
            <i class="fontAliBaba" v-if="parseFloat(remaining_commission)" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i>
            <i class="fontAliBaba price-scale " v-else><span class="num-font">{{remaining_commission}}</span></i>
            <p>{{commissionData.ftitle_commission_left}}</p>
          </div>
          <div class="item fl">
            <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(commissionData.wait_commission)"></i> -->
            <i class="fontAliBaba" v-if="parseFloat(wait_commission)" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i>
            <i class="fontAliBaba price-scale" v-else><span class="num-font">{{wait_commission}}</span></i>
            <p>待收益</p>
          </div>
          <div class="item fl"
               v-if="commissionData.dhs_virtual_order_success_return==1">
            <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(commissionData.wait_cost)"></i>
            <p>未结算成本</p>
          </div>
          <span @click="Jump('myCommission')"
                class="fr btn-sign">
            <i></i>提现
          </span>
        </div>
      </section>
    </div>

    <dhs-static v-if="dhsInfo.dhs_is_show_performance == 1"></dhs-static>

    <div class="accountPanel-links"
         v-if="taskInfo.dhs_auto_degrade">
      <div class="u-id-s2-actions-title">我的任务</div>
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor2" :class="taskInfo.degrade_order_amount && taskInfo.degrade_order_num?'col3':'col2'">
          <div class="item fl"><i class="fontAliBaba">{{taskInfo.last_days}}</i>
            <p>剩余天数</p>
          </div>

          <div class="item fl"
                v-if="taskInfo.degrade_order_amount && taskInfo.last_fee"><i class="fontAliBaba">{{taskInfo.last_fee}}</i>
            <p>未完成额度</p>
          </div>
          <div class="item fl"
                v-if="taskInfo.degrade_order_amount && !taskInfo.last_fee"><i>已完成</i>
            <p>未完成额度</p>
          </div>

          <div class="item fl"
               v-if="taskInfo.degrade_order_num && taskInfo.last_count"><i class="fontAliBaba">{{taskInfo.last_count}}</i>
            <p>未完成订单数</p>
          </div>
          <div class="item fl"
                v-if="taskInfo.degrade_order_num && !taskInfo.last_count"><i>已完成</i>
            <p>未完成订单数</p>
          </div>
        </div>

      </section>
    </div>
    <!-- 我的服务 -->
    <template>
      <dhs-index :dhsInfo="dhsInfo" :dzData="dzData" v-if="template_style == 1" @showQrcode="_show_qrcode()"></dhs-index>
      <dhs-index2 :dhsInfo="dhsInfo" :dzData="dzData" v-else-if="template_style == 2" @showQrcode="_show_qrcode()"></dhs-index2>
    </template>

    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt @longpress="saveCodeImage(qrcode_url)"/>
    </van-popup>

  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import userHeader from '@/views/user/components/header/index'
import userNav from '@/views/user/components/nav/index'
import dhsIndex from '@/views/user/dhs/components/dhsIndex/index'
import dhsIndex2 from '@/views/user/dhs/components/dhsIndex2/index'
import dhsStatic from './components/dhsStatis'
// import ad_img from '@img/user/ad.png'
import { getDhsCenterData } from '@/api/user/dhs/dhsApi.js'
import { getCommissionIncome } from '@/api/user/user'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'
import small from '@/smallapp/small'
import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({
  components: {
    userNav,
    userHeader,
    dhsIndex,
    dhsIndex2,
    dhsStatic
  },
  data() {
    return {
      template_style: 1,
      memberData: {},
      remaining_commission: '--',
      wait_commission: '--',
      // 头部数据
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: true
      },
      dhs_salesaward_rule: {},
      // 提现数据（佣金）
      commissionData: {
        // total_commission: 0,
        ftitle_commission_left: '',
        // wait_commission: 0,
        dhs_virtual_order_success_return: 0,
        wait_cost: 0
      },
      // 任务信息
      taskInfo: {
        dhs_auto_degrade: 0,
        last_days: 0,
        last_fee: 0,
        last_count: 0,
        degrade_order_amount: 0,
        degrade_order_num: 0
      },

      dhsInfo: {},

      qrcode_url: '',
      is_show_qrcode: false,
      dzData: {
        is_yj: false,
        is_ltsn: false, // 莱特妮丝定制
      },
      dzXmnData: {} // 定制喜美恩数据
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  created() {
    this.init()
    // TODO 小程序使用全局的shopId
    let shop = small.globalData.shopId
    const ltsn_dz = this.$_shop('$_ltsn_dz', shop)
    this.dzData.is_ltsn = ltsn_dz
  },
  methods: {
    init() {
      let shop = small.globalData.shopId
      const is_yj = this.$_shop('$_yj', shop)
      this.dzData.is_yj = is_yj
      this.$loadingWrap.show()
      getDhsCenterData().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''
            wx.setNavigationBarTitle({
              title: res.data.common_center_parameter.ftitle_dhs_center
            })
          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          // x+1 链动中心 start
          this.memberData.is_chaining = resData.is_chaining || 0
          this.memberData.is_show_chaining = resData.is_show_chaining
          // x+1 链动中心 end
          // 复制中心 start
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          // 复制中心 end

          //  头部数据
          if (resData.top_bg != '') {
            this.headerData.bgImg = resData.top_bg
          }
          // TODO 头像处理
          this.headerData.userImg = resData.avatar.indexOf('http') > -1 ? resData.avatar : 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg'
          this.headerData.nickname = resData.dhsInfo.nickname
          this.headerData.mobile = resData.dhsInfo.mobile
          this.headerData.show_level = resData.show_level
          this.headerData.rank_name = resData.dhsInfo.rank_name
          this.headerData.end_time = resData.dhsInfo.end_time
          this.headerData.letterCount = resData.common_center_parameter.letterCount
          this.headerData.show_qrcode = resData.common_center_renovation_parameter.show_qrcode
          this.headerData.end_time = resData.dhs_end_time
          this.qrcode_url = resData.qrcode_url
          this.dhs_salesaward_rule = resData.dhs_salesaward_rule
          // 提现数据（佣金）
          // this.commissionData.total_commission = resData.dhsInfo.total_commission
          this.commissionData.ftitle_commission_left = resData.ftitle_commission_left
          // this.commissionData.wait_commission = resData.wait_commission
          this.commissionData.dhs_virtual_order_success_return = resData.dhs_virtual_order_success_return
          this.commissionData.wait_cost = resData.wait_cost
          // 任务信息
          this.taskInfo.dhs_auto_degrade = resData.dhs_auto_degrade
          this.taskInfo.last_days = resData.last_days
          this.taskInfo.last_fee = resData.last_fee
          this.taskInfo.last_count = resData.last_count
          this.taskInfo.degrade_order_amount = resData.degrade_order_amount
          this.taskInfo.degrade_order_num = resData.degrade_order_num
          // 图标数据
          this.dhsInfo = resData
          // 存储是否是五级订货商
          window.localStorage.setItem('dz_xsj', resData.is_offline_show_profit)

          this.dzData.is_sej_dz = resData.is_sej_dz || 0
          // 王学军 平级业绩 定制
          this.dzData.is_jzx_multi_dhs_dz = resData.is_jzx_multi_dhs_dz || 0
          // 苏州银丰 定制
          this.dzData.is_szyf_dz = resData.is_szyf_dz || 0
          // 层层报单定制
          this.dzData.dz_is_show_my_purchase = resData.dz_is_show_my_purchase || 0
          this.dzData.dz_is_show_purchase = resData.dz_is_show_purchase || 0
          this.dzData.dz_is_show_lower_purchase = resData.dz_is_show_lower_purchase || 0
        } else {
          this.$Error(res.msg)
        }
      })
      getCommissionIncome().then(res => {
        if (res.status == 1) {
          this.remaining_commission = res.data.remaining_commission
          this.wait_commission = res.data.wait_commission
          /* 喜美恩定制 */
          this.dzXmnData.user_principal = res.data.user_principal
          // console.log(res)
          // console.log('rrrrrrrrrrrrr')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    saveCodeImage(url) {
      small.saveImage(url)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/user/index.scss";
.accountPanel-links {
  .accountPanel {
    .iner-bor {
      border: none;
      &.width{
        .item {
          width: 26.3%;
        }
      }
    }
  }
  .u-id-s2-actions-title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    border-bottom: 1px solid #EDEDED;
  }
}
</style>
